<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-button @click="sendEvent(1)">首页</el-button>>>
      <el-button @click="show=true">{{fdata.label}}</el-button>
    </el-breadcrumb>
    <div v-if="show">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="15">
            <el-input placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button
              v-if="this.fdata.cmd.val.itemType"
              type="primary"
              @click="createData(false)"
            >添加</el-button>
          </el-col>
        </el-row>

        <el-table :data="data" border stripe>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column
            v-for="(item, index) in fdata.table"
            :key="index"
            :label="item.label"
            :prop="item.prop"
          ></el-table-column>
          <el-table-column label="操作" width="120px" v-if="optShow">
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="修改" placement="top" :enterable="false">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  @click="changeData(scope)"
                ></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="delData(scope)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </div>
    <div class="hf" v-else>
      <template v-if=" fdata.cmd.val.table == 'users'">
        <users @cEvent="recvEvent" :g4="g4" :fdata="client" />
      </template>
      <template v-if=" fdata.cmd.val.table == 'items' && fdata.cmd.val.itemType != 1">
        <items @cEvent="recvEvent" :g4="g4" :fdata="client" />
      </template>
      <template v-if=" fdata.cmd.val.table == 'items' && fdata.cmd.val.itemType == 1">
        <banner @cEvent="recvEvent" :g4="g4" :fdata="client" />
      </template>
    </div>
  </div>
</template>

<script>
import users from "./Users";
import items from "./itemTour";
import banner from "./banner";
export default {
  components: { users, items, banner },
  props: ["fdata", "g4"],
  watch: {
    fdata: {
      handler(newValue, oldValue) {
        this.client = {};
        this.show = true;
        this.data = null;
        this.currentPage = 1;
        this.pageSize = 10;
        this.total = -1;
        sessionStorage.setItem("currentPage", this.currentPage);
        sessionStorage.setItem("pageSize", this.pageSize);
        sessionStorage.setItem("total", this.total);
        this.getData(newValue);
      }
    }
  },
  data() {
    return {
      data: null,
      client: {},
      currentPage: 1,
      pageSize: 10,
      total: -1,
      show: true,
      optShow: true
    };
  },
  // props: ["routerData"],
  methods: {
    sendEvent(val) {
      // console.log(val);
      // this.client.create = true;
      this.$emit("fEvent", val);
    },
    recvEvent(val) {
      switch (val) {
        case 1:
          this.show = true;
          break;

        default:
          console.log(val);
          break;
      }
    },
    createData() {
      // console.log(this.$cp(this.fdata.cmd.val.table));
      this.client = {
        // balance: 0,
        // create: true,
        // manage: this.fdata.manage,
        fdataType: 2, // 0 查看 1 修改 2 新建
        itemType: this.fdata.cmd.val.itemType
      };

      this.show = false;
      // console.log(this.fdata.cmd.val.itemType);
    },
    changeData(val) {
      this.client = this.data[val.$index];
      // this.client.create = false;
      // this.client.manage = this.fdata.manage;
      this.client.fdataType = this.client.itemType == 11 ? 0 : 1; // 0 查看 1 修改 2 新建
      this.show = false;
      // console.log(this.$cp(this.g4));
    },
    handleSizeChange(newSize) {
      // 监听 每页显示数 改变事件
      // console.log('每页显示数被改变:'+newSize);
      this.pageSize = newSize;
      sessionStorage.setItem("pageSize", newSize);
      this.getData();
    },
    handleCurrentChange(newPage) {
      //监听 页码值 改变事件
      // console.log('当前页:'+newPage);
      this.currentPage = newPage;
      sessionStorage.setItem("currentPage", newPage);
      this.getData();
    },
    userDataChanged(val) {
      let updata = this.$del(val);
      updata.state = val.state ? 1 : 0;
      // console.log(updata);
    },
    delData(val) {
      this.$message.error("暂时禁止任何删除行为");
      // console.log(val);
    },
    getData(val) {
      if (!val) val = this.fdata;
      // console.log(this.$cp(this.fdata));
      if (val.cmd.val.table == "orders") {
        this.optShow = false;
      } else this.optShow = true;
      // console.log(val.cmd.val.table); // 两次正常
      let tmp = Number(sessionStorage.getItem("pageSize"));
      if (!tmp) {
        tmp = this.pageSize;
        sessionStorage.setItem("pageSize", this.pageSize);
      } else if (tmp != this.pageSize) this.pageSize = tmp;
      tmp = Number(sessionStorage.getItem("currentPage"));
      if (!tmp) {
        tmp = this.currentPage;
        sessionStorage.setItem("currentPage", this.currentPage);
      } else if (tmp != this.currentPage) this.currentPage = tmp;
      tmp = Number(sessionStorage.getItem("total"));
      if (!tmp) {
        tmp = this.total;
        sessionStorage.setItem("total", this.total);
      }
      if (this.total < 0) {
        tmp = this.$cp(val.cmd);
        tmp.val.sum = 1;
        this.$axios
          .post("q.php", tmp)
          .then(result => {
            // console.log(result.data,tmp);
            if (result.data.result) {
              // console.log(result.data);
              this.total = result.data.result.sum;
              sessionStorage.setItem("total", this.total);
              // this.getData(val);
              // return;
            } else
              this.$message.error("1发生错误!可能您与服务器的网络连接中断");
          })
          .catch(err => {
            this.$message.error("222发生错误!可能您与服务器的网络连接中断");
          });
      }
      tmp = this.$cp(val.cmd);
      tmp.val.limit =
        (this.currentPage - 1) * this.pageSize + "," + this.pageSize;
      this.$axios
        .post("q.php", tmp)
        .then(result => {
          if (result.data.result) {
            this.data = result.data.result;
            // console.log(this.$cp(this.data[0]));
            return;
          }
          this.$message.error("发送数据错误!请重试");
        })
        .catch(err => {
          this.$message.error("4发生错误!可能您与服务器的网络连接中断");
        });
    }
  },
  created() {
    this.getData(this.fdata);
  }
};
</script>

<style lang="less" scoped>
</style>
